<extend name="public@base"/>
<block name="head">

    <link rel="stylesheet" href="__TMPL__/public/assets/assets/owlcarousel/owl.carousel.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/assets/owlcarousel/owl.theme.css">

    <link href="__TMPL__/public/assets/css/superfish.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/component.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/parallax-slider/parallax-slider.css"/>
    <script type="text/javascript" src="__TMPL__/public/assets/js/parallax-slider/modernizr.custom.28468.js"></script>
</block>
<block name="body">
    <div id="da-slider" class="da-slider">
        <slides id="$theme_vars['top_slide']">
            <div class="da-slide">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h2>
                                <php>
                                    $slide_title = explode('|',$vo['title']);
                                    $slide_desc = explode('|',$vo['description']);
                                </php>
                                <volist name="slide_title" id="v">
                                    <i>{$v}</i>
                                    <br>
                                </volist>

                            </h2>
                            <p>
                                <volist name="slide_desc" id="v">
                                    <i>{$v}</i>
                                    <br>
                                </volist>


                            </p>
                            <a href="{$vo.url}" class="btn btn-info btn-lg da-link">
                                Read more
                            </a>
                            <div class="da-img">
                                <img src="{$vo.image|cmf_get_image_url}" alt="image01"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </slides>
        <noslides id="1">
            <li>你还没有创建幻灯片;</li>
        </noslides>


        <nav class="da-arrows">
        <span class="da-arrows-prev">
        </span>
            <span class="da-arrows-next">
        </span>
        </nav>
    </div>
    <widget name="first_section">
        <div class="container">
        <div class="row mar-b-50">
            <div class="col-md-12">
                <div class="text-center feature-head wow fadeInDown">
                    <h1 class="">
                        {$widget.title}
                    </h1>
                </div>
                <div class="feature-box">
                    <portal:articles limit="3" order="id" categoryIds="$widget['vars']['category']">
                    <div class="col-md-4 col-sm-4 text-center wow fadeInUp">
                        <div class="feature-box-heading">
                            <em>
                                <img src="{$vo.more.thumbnail|cmf_get_image_url}" alt="" width="100" height="100">

                            </em>
                            <h4>
                                <b>{$vo.post_title}</b>

                            </h4>
                        </div>
                        <p class="text-center">
                           {$vo.post_excerpt}
                        </p>
                    </div>
                    </portal:articles>

                </div>

                <!--feature end-->
            </div>
        </div>
    </div>
    </widget>
    <widget name="second_section">
        <!--property start-->
        <!--引入方法-->
        <php>
            $service = new \app\portal\service\ApiService();
            $page = $service->page($widget['vars']['page_id']);


        </php>
        <notempty name="page">
            <div class="property gray-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-sm-6 text-center wow fadeInLeft">
                            <img src="{$page.more.thumbnail|cmf_get_image_url}" alt="">
                        </div>

                        <div class="col-lg-6 col-sm-6 wow fadeInRight">
                            <h1>
                                {$page.post_title}
                            </h1>
                            <hr>
                                {$page.post_content}
                            <hr>
                            <a href="{$widget.vars.btn_link}" class="btn btn-purchase">
                                {$widget.vars.btn_title}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </notempty>

   
        <!--property end-->
    </widget>

</block>
<block name="script">
    <script src="__TMPL__/public/assets/js/jquery-1.8.3.min.js">
    </script>
    <script src="__TMPL__/public/assets/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/hover-dropdown.js">
    </script>
    <script defer src="__TMPL__/public/assets/js/jquery.flexslider.js">
    </script>
    <script type="text/javascript" src="__TMPL__/public/assets/assets/bxslider/jquery.bxslider.js">
    </script>

    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.parallax-1.1.3.js">
    </script>
    <script src="__TMPL__/public/assets/js/wow.min.js">
    </script>
    <script src="__TMPL__/public/assets/assets/owlcarousel/owl.carousel.js">
    </script>

    <script src="__TMPL__/public/assets/js/jquery.easing.min.js">
    </script>
    <script src="__TMPL__/public/assets/js/link-hover.js">
    </script>
    <script src="__TMPL__/public/assets/js/superfish.js">
    </script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/parallax-slider/jquery.cslider.js">
    </script>
    <script type="text/javascript">
        $(function () {

            $('#da-slider').cslider({
                autoplay: true,
                bgincrement: 100
            });

        });
    </script>


    <!--common script for all pages-->
    <script src="__TMPL__/public/assets/js/common-scripts.js">
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function () {


            $('.bxslider1').bxSlider({
                minSlides: 5,
                maxSlides: 6,
                slideWidth: 360,
                slideMargin: 2,
                moveSlides: 1,
                responsive: true,
                nextSelector: '#slider-next',
                prevSelector: '#slider-prev',
                nextText: 'Onward →',
                prevText: '← Go back'
            });

        });


    </script>


    <script>
        $('a.info').tooltip();

        $(window).load(function () {
            $('.flexslider').flexslider({
                animation: "slide",
                start: function (slider) {
                    $('body').removeClass('loading');
                }
            });
        });

        $(document).ready(function () {

            $("#owl-demo").owlCarousel({

                items: 4

            });

        });

        jQuery(document).ready(function () {
            jQuery('ul.superfish').superfish();
        });

        new WOW().init();


    </script>
</block>